<template>
    <view class="tool">
        <view class="title flex_l">更多功能</view>
        <view class="tool_list">
            <view class="tool_item" @click="makePhone">
                <image src="@/static/images/mine/icon_kefu.png" mode="heightFix" />
                <text>客服中心</text>
            </view>
            <view class="tool_item" @click="toOperate">
                <image src="@/static/images/mine/icon_zhinan.png" mode="heightFix" />
                <text>操作指南</text>
            </view>
            <!-- <view class="tool_item">
                <image src="@/static/images/mine/icon_tousu.png" mode="heightFix" />
                <text>投诉建议</text>
            </view> -->
            <view class="tool_item" @click="toSet">
                <image src="@/static/images/mine/icon_shezhi.png" mode="heightFix" />
                <text>系统设置</text>
            </view>
        </view>
    </view>
    <!-- 拨号提示 -->
    <up-modal showCancelButton :show="showModal" title="联系客服" @confirm="confirm" @cancel="showModal = false">
        <view>拨打客户联系电话:18936457133</view>
    </up-modal>
</template>

<script setup lang="ts">
import config from '@/utils/config';
import { ref } from 'vue';

const props = withDefaults(defineProps<{
    isLogin: boolean
}>(), {
    isLogin: false
})
// 客服中心拨打电话
const showModal = ref(false)
const makePhone = () => {
    showModal.value = true
}
const { customerServicePhone } = config;
const confirm = () => {
    uni.makePhoneCall({
        phoneNumber: customerServicePhone,
        fail:(fail)=>{}
    })
    showModal.value = false
}
// 操作指南
const toOperate = () => {
    if (!props.isLogin) return
    uni.navigateTo({
        url: '/pages/public/operate/operate'
    })
}
// 跳转设置页
const toSet = () => {
    if (!props.isLogin) return
    uni.navigateTo({
        url: '/pages/mine/set/set'
    })
}


</script>

<style lang="scss" scoped>
.tool {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
}

.title {
    height: 94rpx;
    border-bottom: 2rpx solid #F8F8F8;
    font-weight: 500;
    font-size: 30rpx;
    color: #222222;
}

.tool_list {
    width: 100%;
    padding: 30rpx 0 28rpx 0;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.tool_item {
    width: 25%;
    font-size: 26rpx;
    color: #555555;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
        height: 40rpx; margin-bottom: 10rpx;
    }
}
</style>